<template>
  <div>
    <h1>接口管理</h1>
    <!--/////////////////////////------------------------添加修改----------------------/////////////////////////  -->
    <el-dialog
      :title="this.titles"
      :visible.sync="interfacedialog"
      width="30%"
      :before-close="handleClose"
    >
      <span>

        <el-form :model="interfaceForm">
          <el-form-item label="接口类型">
            <el-select v-model="interfaceForm.interfaceType" placeholder="请选择">
              <el-option label="主键查询" value="1" />
              <el-option label="分页查询" value="2" />
              <el-option label="列表查询" value="3" />
              <el-option label="递归查询" value="4" />
              <el-option label="新增" value="5" />
              <el-option label="批量新增" value="6" />
              <el-option label="更新" value="7" />
              <el-option label="主键更新" value="8" />
              <el-option label="删除" value="9" />
              <el-option label="主子查询" value="10" />
              <el-option label="主子新增" value="11" />
              <el-option label="主增子更" value="12" />
            </el-select>
          </el-form-item>

          <el-form-item label="接口编号">
            <el-input v-model="interfaceForm.interfaceNo" placeholder="接口编号" />
          </el-form-item>

          <el-form-item label="接口名称">
            <el-input v-model="interfaceForm.interfaceName" placeholder="接口名称" />
          </el-form-item>

          <el-form-item label="类别">
            <el-select v-model="interfaceForm.interfaceTag" placeholder="请选择">
              <el-option label="长租" value="长租" />
              <el-option label="短租" value="短租" />
            </el-select>
          </el-form-item>

          <el-form-item label="表/视图(多个用';'分割)">
            <el-input v-model="interfaceForm.tableName" placeholder="表/视图" />
          </el-form-item>

          <el-form-item label="排序字段">
            <el-input v-model="interfaceForm.authMode" placeholder="排序字段" />
          </el-form-item>

          <el-form-item label="范围查询字段(多个用';'分割)">
            <el-input v-model="interfaceForm.createTime" placeholder="比较查询字段(多个用';'分割)" />
          </el-form-item>

          <el-form-item label="模糊查询字段(多个用';'分割)">
            <el-input v-model="interfaceForm.pkColumn" placeholder="比较查询字段(多个用';'分割)" />
          </el-form-item>

          <el-form-item label="主键(多个用';'分割)">
            <el-input v-model="interfaceForm.subPkColumn" placeholder="主键" />
          </el-form-item>

          <el-form-item label="子表/视图(多个用';'分割)">
            <el-input v-model="interfaceForm.subTableName" placeholder="子表/视图" />
          </el-form-item>

          <el-form-item label="子表主键(多个用';'分割)">
            <el-input v-model="interfaceForm.interfaceOrder" placeholder="主键" />
          </el-form-item>

          <el-form-item label="子表外键 (多个用';'分割)">
            <el-input v-model="interfaceForm.subFkColumn" placeholder="主键" />
          </el-form-item>

          <el-form-item label="验证方式">
            <el-radio-group v-model="interfaceForm.likeColumns">
              <el-radio label="验证" value="验证" />
              <el-radio label="不验证" value="不验证" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="列表数量">
            <el-input v-model="interfaceForm.createUser" placeholder="列表数量" />
          </el-form-item>

          <el-form-item label="自定义类型">
            <el-radio-group v-model="interfaceForm.updateUser">
              <el-radio label="忽略" value="1" />
              <el-radio label="追加主" value="2" />
              <el-radio label="替换主" value="3" />
              <el-radio label="追加从" value="4" />
              <el-radio label="替换从" value="5" />

            </el-radio-group>
          </el-form-item>

          <el-form-item label="自定义sql">
            <el-input-number v-model="interfaceForm.sqlType" :min="0" :max="1" label="自定义sql" />
          </el-form-item>
          <el-form-item label="是否包含自身">
            <el-input-number v-model="interfaceForm.isIncludMyself" :min="0" :max="1" label="是否包含自身" />
          </el-form-item>
          <el-form-item label="排序字段是否是时间">
            <el-input v-model="interfaceForm.orderType" placeholder="排序字段是否是时间" />
          </el-form-item>

          <el-form-item label="排序">
            <el-input-number v-model="interfaceForm.listNum" :min="0" :max="1" label="排序" />
          </el-form-item>

          <el-form-item label="比较字段">
            <el-input v-model="interfaceForm.compareColumn" placeholder="比较字段" />
          </el-form-item>
          <el-form-item label="比较字段">
            <el-input v-model="interfaceForm.userDefinedSql" type="textarea" placeholder="比较字段" />
          </el-form-item>
        </el-form>

      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="interfacedialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
    <!--/////////////////////////添加修改/////////////////////////  -->

    <!-- ///////////////////////////搜索////////////////////////////   -->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="服务名称">
        <el-input v-model="queryForm.interfaceName" placeholder="服务名称" @keyup.enter.native="onSubmit()" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
        <el-button type="success" @click="handleToAdd">新增</el-button>
        <el-button type="warning" @click="handleToUpdate">修改</el-button>
      </el-form-item>
    </el-form>
    <!-- ///////////////////////////搜索////////////////////////////   -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="interfaceNo"
        label="服务编号"
        width="120"
      />
      <el-table-column
        prop="interfaceName"
        label="服务名称"
        width="120"
      />
      <el-table-column
        prop="interfaceType"
        label="类型"
        width="120"
      />
      <el-table-column
        prop="interfaceTag"
        label="类别"
        width="120"
      />
      <el-table-column
        prop="time"
        label="连接地址"
        width="120"
      />
    </el-table>
    <el-pagination
      :current-page="queryForm.pageNum"
      :page-sizes="[3, 6, 9]"
      :page-size="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Interface',
  data() {
    return {
      titles: '',
      ids: [],
      tableData: [],
      interfacedialog: false,
      interfaceFormWidth: '120px',
      queryForm: {
        pageSize: 3,
        pageNum: 1,
        total: 0,
        interfaceName: ''
      },
      interfaceForm: {
        interfaceType: '',
        interfaceNo: '',
        interfaceName: '',
        interfaceTag: '',
        authMode: '',
        tableName: '',
        pkColumn: '',
        subPkColumn: '',
        columnList: '',
        likeColumns: '',
        subTableName: '',
        createUser: '',
        interfaceOrder: '',
        subFkColumn: '',
        isIncludMyself: 1,
        orderType: '',
        listNum: 1,
        updateUser: '',
        compareColumn: '',
        userDefinedSql: '',
        sqlType: 1
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      axios.post('http://localhost:8200/sys/interface/list', this.queryForm).then((response) => {
        this.tableData = response.data.obj.list
        this.queryForm.pageNum = response.data.obj.pageNum
        this.queryForm.pageSize = response.data.obj.pageSize
        this.queryForm.total = response.data.obj.total
      })
    },
    handleSelectionChange(val) {
      this.ids = val
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.initData()
    },
    onSubmit() {
      this.initData()
    },
    handleDelete() {
      var ids = this.ids.map((row) => row.interfaceNo).join(',')
      alert(JSON.stringify(ids))
      if (this.ids.length == 0) {
        alert('至少选择一个')
        return
      }
      if (confirm('确认删除吗?')) {
        axios.get('http://localhost:8200/sys/interface/delete?ids=' + ids).then((response) => {
          if (response.data.code == 200) {
            alert(JSON.stringify(response.data.msg))
            this.initData()
          }
        })
      }
    },
    handleToAdd() {
      this.titles = '新增'
      this.interfaceForm = {}
      this.interfacedialog = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.interfaceForm = {}
        })
        .catch(_ => {})
    },
    handleSave() {
      if (this.titles == '修改') {
        this.handleUpdate()
      } else {
        this.handleInsert()
      }
    },
    handleInsert() {
      axios.post('http://localhost:8200/sys/interface/save', this.interfaceForm).then((response) => {
        if (response.data.code == 200) {
          alert(JSON.stringify(response.data.msg))
          this.interfacedialog = false
          this.initData()
        }
      })
    },
    handleUpdate() {
      axios.post('http://localhost:8200/sys/interface/update', this.interfaceForm).then((response) => {
        if (response.data.code == 200) {
          alert(JSON.stringify(response.data.msg))
          this.interfacedialog = false
          this.initData()
        }
      })
    },
    handleToUpdate() {
      this.titles = '修改',
      this.handleUpdates(this.ids[0]),
      this.interfacedialog = true
    },
    handleUpdates(row) {
      this.interfaceForm = row
    }
  }
}
</script>

<style scoped>

</style>
